<template>
    <div class="star star-36">
      <span class="star-item" v-for="(c,index) of StarClass" :key="index" :class="c"></span>
     <!--  <span class="star-item on"></span>
      <span class="star-item on"></span>
      <span class="star-item half"></span>
      <span class="star-item off"></span> -->
    </div>
</template>

<script>
const ON = 'on'
const HALF = 'half'
const OFF = 'off'
export default {
  props: {
      score:{
          type:Number
      }
  },
  data() {
    return {};
  },
  computed: {
      StarClass(){
          let starArr = []

          let {score} = this

         // 取整数
          let intNum = Math.floor(score)

            // 循环这个数 这个数为几 就在数组里面加几个on(代表有几个整星)
          for (var i=0;i<intNum;i++){
              starArr.push(ON)
          }
          //在js里面尽量不要用小数计算 所有都乘以10
          //如果大于5 就可以有半颗星
          if (score*10-intNum*10>=5) {
              starArr.push(HALF)
          }
          //表示总共5颗星 只要小于5 剩余的全部添加off(表示是灰色的星)
          while (starArr.length<5) {
              starArr.push(OFF)
          }
          return starArr
      }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang='stylus' >
@import '../../common/stylus/mixins';
                        .star //2x图 3x图
                            float left
                            font-size 0
                            .star-item
                              display inline-block
                              background-repeat no-repeat
                            &.star-48
                              .star-item
                                width 20px
                                height 20px
                                margin-right 22px
                                background-size 20px 20px
                                &:last-child
                                  margin-right: 0
                                &.on
                                  bg-image('./images/stars/star48_on')
                                &.half
                                  bg-image('./images/stars/star48_half')
                                &.off
                                  bg-image('./images/stars/star48_off')
                            &.star-36
                              .star-item
                                width 15px
                                height 15px
                                margin-right 6px
                                background-size 15px 15px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star36_on')
                                &.half
                                  bg-image('./images/stars/star36_half')
                                &.off
                                  bg-image('./images/stars/star36_off')
                            &.star-24
                              .star-item
                                width 10px
                                height 10px
                                margin-right 3px
                                background-size 10px 10px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star24_on')
                                &.half
                                  bg-image('./images/stars/star24_half')
                                &.off
                                  bg-image('./images/stars/star24_off')</style>
